<script setup lang="ts">
import {computed} from 'vue'

const {waterForm, tableHeaders} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
  tableHeaders: Array;  // 定义采样时间的类型
  tabler: Array;  // 定义采样时间的类型
}>();

// 计算索引 0 和 2 的平均值
const avgValues = computed(() => {
  return {
    0: calcAverage(0, 1),
    2: calcAverage(2, 3)
  };
});

// 计算索引 0 和 2 的差值
const diffValues = computed(() => {
  return {
    0: calcDiff(0, 1),
    2: calcDiff(2, 3)
  };
});

// 计算平均值
function calcAverage(index1, index2) {
  const ph1 = parseFloat(waterForm.pxycd[index1]?.px_cdz) || 0;
  const ph2 = parseFloat(waterForm.pxycd[index2]?.px_cdz) || 0;
  return ((ph1 + ph2) / 2).toFixed(2);
}

// 计算差值
function calcDiff(index1, index2) {
  const ph1 = parseFloat(waterForm.pxycd[index1]?.px_cdz) || 0;
  const ph2 = parseFloat(waterForm.pxycd[index2]?.px_cdz) || 0;
  return Math.abs(ph1 - ph2).toFixed(2);
}

</script>

<template>
  <div>
    <div style="padding: 0 30px" v-for="(pageData, pageIndex) in tableHeaders" :key="pageIndex">
      <h1 style="text-align: center;padding-top: 40px">水质 重量法分析原始记录</h1>
      <div>SXLPHJ/JL/CX-22-48</div>
      <table class="table">
        <tr style="background-color: #f2f2f2">
          <td>任务编号</td>
          <td>
            {{ waterForm.task_name }}
          </td>
          <td>分析项目</td>
          <td>
            {{ waterForm.fxxm }}
          </td>
          <td>采样日期</td>
          <td>
            {{ waterForm.sampling_time }}
          </td>
          <td>分析日期</td>
          <td>
            {{ waterForm.anal_time }}
          </td>
        </tr>
        <tr>
          <td>分析方法</td>
          <td colspan="5">
            {{ waterForm.method }}
          </td>
          <td>样品类别</td>
          <td>
            {{ waterForm.category_id }}
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>恒重仪器</td>
          <td>
            {{ waterForm.hz_device_name }}
          </td>
          <td>仪器型号</td>
          <td>
            {{ waterForm.hz_device_model }}
          </td>
          <td>仪器编号</td>
          <td>
            {{ waterForm.hz_device_number }}
          </td>
          <td>环境温度</td>
          <td>
            {{ waterForm.temperature }}
          </td>
        </tr>
        <tr>
          <td>天平级别</td>
          <td>
            {{ waterForm.tp_device_name }}
          </td>
          <td>天平型号</td>
          <td>
            {{ waterForm.tp_device_model }}
          </td>
          <td>天平编号</td>
          <td>
            {{ waterForm.tp_device_number }}
          </td>
          <td>环境湿度</td>
          <td>
            {{ waterForm.humidity }}
          </td>
        </tr>
        <tr>
          <td>计算公式</td>
          <td colspan="7">
            {{ waterForm.js_formula }}
          </td>
        </tr>
        <tr>
          <td>样品处理</td>
          <td colspan="7">
            {{ waterForm.process }}
          </td>
        </tr>
      </table>
      <table class="table">
        <tr>
          <td rowspan="2" style="width: 150px;">样品编号</td>
          <td rowspan="2">取样体积V(mL)</td>
          <td colspan="3">初重B(g)</td>
          <td colspan="3">终重A(g)</td>
          <td rowspan="2">样品净重m(g)</td>
          <td rowspan="2">样品浓度C(mg/L)</td>
          <td rowspan="2">备注</td>
        </tr>
        <tr>
          <td>初重1</td>
          <td>初重2</td>
          <td>初重3</td>
          <td>终重1</td>
          <td>终重2</td>
          <td>终重3</td>
        </tr>
        <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
          <td v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
            <div style="height: 25px;display: flex;align-items: center;justify-content: center">
              {{ row[key] }}
            </div>
          </td>
        </tr>
      </table>
      <table class="table">
        <tr>
          <td colspan="8" style="text-align: center">平行样测定</td>
        </tr>
        <tr>
          <td>平行样编号</td>
          <td>
            测定值 ( {{ waterForm.unit.px_cdz }} )
          </td>
          <td>
            平均值 ( {{ waterForm.unit.px_pjz }} )
          </td>
          <td>
            相对 ( {{ waterForm.unit.px_xd }} )（%）
          </td>
          <td>
            质控要求（%）
          </td>
          <td>
            是否合格（%）
          </td>
        </tr>
        <tr v-for="(item,index) in waterForm.pxycd" :key="index">
          <td>
            {{ item.px_pxybh }}
          </td>
          <td>
            {{ item.px_cdz }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ avgValues[index] }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ diffValues[index] }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_zkyq }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_sfhg }}
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5">
            {{ waterForm.notes }}
          </td>
        </tr>
      </table>
      <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
        <div>分析人：</div>
        <div>校核人：</div>
        <div>审核人：</div>
        <div>第 {{ pageIndex + 1 }} 页 / 共 {{ tableHeaders.length }} 页</div>
      </div>
    </div>
  </div>

</template>


<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 4px 10px;
  font-size: 11px;
  text-align: center;
  height: 24px;
}

tr {
  page-break-inside: avoid
}

.fs12 {
  font-size: 12px;
}


.table {
  width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {
  /* 隐藏页眉和页脚 */
  @page {
    margin: 0;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th, td {
    page-break-inside: avoid;
  }

  body {
    margin: 0;
    padding: 0;
    zoom: 100%;
  }

  div {
    page-break-inside: avoid;
  }

  /* 禁用打印页脚和页眉 */
  .no-print {
    display: none;
  }

  /* 如果你不想打印特定元素，可以这样设置 */
  header, footer, nav, .no-print {
    display: none !important;
  }

  /* 保证内容区域不受其他元素影响 */
  .content {
    display: block;
  }
}
</style>
